<template>
  <div>
    <!--<div class="d-flex justify-content-between mt-5">-->
      <!--<div class="flex-grow-1">-->
        <!--<el-select v-model="value" placeholder="请选择套餐包">-->
          <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
        <!--<el-input  class="mx-3" style="width: 200px;" v-model="phone" placeholder="请输入手机号"></el-input>-->
        <!--<el-button type="primary" icon="el-icon-search">查询</el-button>-->
      <!--</div>-->
      <!--<div>-->
        <!--<el-radio-group v-model="dayRadio">-->
          <!--<el-radio-button label="今天(0)"></el-radio-button>-->
          <!--<el-radio-button label="昨天(0)"></el-radio-button>-->
          <!--<el-radio-button label="前天(0)"></el-radio-button>-->
        <!--</el-radio-group>-->
      <!--</div>-->
    <!--</div>-->
    <div class="pr-3 py-3">
      <!--<el-radio v-model="choice" label="1" border>全部({{total}})</el-radio>-->
      <!--<el-radio v-model="choice" label="2" border>拒绝(0)</el-radio>-->
      <!--<el-radio v-model="choice" label="3" border>未接通(0)</el-radio>-->
      <!--<el-radio v-model="choice" label="4" border>空号(0)</el-radio>-->
      <el-radio
        v-model="choice"
        v-for="(item,index) in statusArr"
        :key="index"
        :label=item.status
        border
        @change="selectData(item.status)"
      >
        {{item.status_link}}({{item.count}})
      </el-radio>
      <!--<el-radio v-model="choice" label="5" border>已购买(0)</el-radio>-->
      <!--<el-radio v-model="choice" label="7" border>待跟进(0)</el-radio>-->
      <!--<el-radio v-model="choice" label="8" border>准意向(0)</el-radio>-->
    </div>
    <!--表格-->
    <div class="border mt-3">
      <!--<div class="d-flex py-3 pl-3 justify-content-between px-3">-->
        <!--<div><span style="font-size: 20px;">数据列表</span>&nbsp;&nbsp;<span class="text-warning">共0条数据</span></div>-->
        <!--<div>-->
          <!--<el-button type="primary">导入<i class="el-icon-upload2 el-icon&#45;&#45;right"></i></el-button>-->
          <!--<el-button type="primary">导出<i class="el-icon-download el-icon&#45;&#45;right"></i></el-button>-->
        <!--</div>-->
      <!--</div>-->
      <el-table
        :data="tableData"
        :header-cell-style="getRowClass"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          style="width: 12.5%"
          >
        </el-table-column>
        <el-table-column
          prop="app"
          label="app"
          style="width: 12.5%"
          >
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地区"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          prop="pass"
          label="通道"
          style="width: 12.5%"
        >
        </el-table-column>
        <el-table-column
          label="号码"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <span>{{tel(scope.row.phone)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="拨号"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="telephone(scope.$index, scope.row)" type="primary">拨号</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          style="width: 12.5%"
        >
          <template slot-scope="scope">
            <el-input style="width: 80%" v-model="scope.row.remark" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="block mt-3 float-right">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { preview, callPhone, status, select } from '../apis/previewClient'
  export default {
    data() {
      return {
        options: [
          {
          value: '选项1',
          label: '黄金糕'
          },
          {
          value: '选项2',
          label: '双皮奶'
          },
          {
          value: '选项3',
          label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        value: '',
        dayRadio: '今天(0)',
        statusArr: [],
        choice: '1',
        tableData: [
          // {
          //   id: 1,
          //   app: 'QQ',
          //   date: '2016-05-02',
          //   address: '上海市普陀区金沙江路 1518 弄',
          //   pass: '通道1',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 2,
          //   app: '微信',
          //   date: '2016-05-04',
          //   address: '上海市普陀区金沙江路 1517 弄',
          //   pass: '通道2',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 3,
          //   app: '美团',
          //   date: '2016-05-01',
          //   address: '上海市普陀区金沙江路 1519 弄',
          //   pass: '通道3',
          //   phone: '12345678912',
          //   remark: '备注1'
          // },
          // {
          //   id: 4,
          //   app: '大众点评',
          //   date: '2016-05-03',
          //   address: '上海市普陀区金沙江路 1516 弄',
          //   pass: '通道4',
          //   phone: '12345678912',
          //   remark: '备注1'
          // }
        ],
        currentPage: 1,
        total: 0,
        apps: [
          {
            value: '选项1',
            label: '微信'
          },
          {
            value: '选项2',
            label: 'QQ'
          },
          {
            value: '选项3',
            label: '美团'
          },
          {
            value: '选项4',
            label: '大众点评'
          },
          {
            value: '选项5',
            label: '滴滴出行'
          }
        ],
        appValue: ''
      }
    },
    computed:{
      // filtered_list(){
      //   return this.statusArr && this.statusArr.filter(item=>this.filter===0 || item.type===this.filter);
      // }
    },
    async mounted(){
      const result = await preview('10', '1');
      // console.log('result:', result);
      if(result.data.data.length > 0){
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        })
      }
      this.total = result.data.mate.total;
      const statusRes = await status(localStorage.getItem('token'));
      console.log('statusRes:', statusRes.data.data);
      this.statusArr = statusRes.data.data
    },
    methods: {
      // 方法
      // 设置表格第一行的颜色
      getRowClass({ rowIndex }) {
        if (rowIndex === 0) {
          return 'background: #F5F7FA'
        } else {
          return ''
        }
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      async handleCurrentChange(val) {
        // console.log(`handleCurrentChange方法`);
        const result = await preview('10', val);
        this.tableData = [];
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        });
      },
      async telephone(index, row) {
        // console.log(index, row);
        // console.log('拨号中。。。。');
        // console.log('本地：', localStorage.getItem('token'));
        const result = await callPhone(localStorage.getItem('token'), row.phone);
        // console.log(result.data);
        if(result.data.data.length>0){
          this.$confirm(result.data.data[0], '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '正在拨号中。。。'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消拨打'
            });
          });
        } else {
          this.$message({
            type: 'error',
            message: result.data.msg
          });
        }

        // const loading = this.$loading({
        //   lock: true,
        //   text: '拨号中...',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)'
        // });
        // setTimeout(() => {
        //   loading.close();
        // }, 2000);
      },
      async selectData(status){
        // console.log('status:', status);
        const result = await select('10', '1',  status);
        // console.log('result:', result);
        this.tableData = [];
        result.data.data.forEach(item => {
          this.tableData.push({
            id: item.id,
            app: item.app,
            date: item.date,
            address: item.address,
            pass: item.pass,
            phone: item.phone,
            remark: item.remarks
          })
        });
        this.currentPage = result.data.mate.current_page;
        this.total = result.data.mate.total;
      }
    }
  }
</script>

<style scoped>

</style>